<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>代理模式</title>
    <style lang="css">
        .preload {
            display: block;
            width: 160px;
            height: 160px;
        }
    </style>
</head>

<body>
    <h2>虚拟代理合并http请求</h2>
    <p>当我们选中 3 个 checkbox 的时候，依次往服务器发送了 3 次同步文件的请求。可以预见，如此频繁的网络请求将会带来相当大的开销。</p>
    <p>解决方案是，我们可以通过一个代理函数 proxySynchronousFile 来收集一段时间之内的请求， 最后一次性发送给服务器。比如我们等待 2 秒之后才把这 2 秒之内需要同步的文件 ID 打包发给 服务器，如果不是对实时性要求非常高的系统，2秒的延迟不会带来太大副作用，却能大大减轻
        服务器的压力。
    </p>

    <input type="checkbox" id="1"></input>1
    <input type="checkbox" id="2"></input>2
    <input type="checkbox" id="3"></input>3
    <input type="checkbox" id="4"></input>4
    <input type="checkbox" id="5"></input>5
    <input type="checkbox" id="6"></input>6
    <input type="checkbox" id="7"></input>7
    <input type="checkbox" id="8"></input>8
    <input type="checkbox" id="9"></input>9

    <script type="text/javascript">
        var synchronousFile = function (id) {
            console.log('开始同步id ' + id)
        }

        var proxySynchronousFile = (function () {
            var idList = [] // 定时器
            var timer
            return function (id) {
                idList.push(id)
                if (timer) {
                    return
                }

                timer = setTimeout(() => {
                    synchronousFile(idList.join(','))
                    clearTimeout(timer)
                    timer = null
                    idList.length = 0
                }, 2000)
            }

        })()
        var input = document.querySelectorAll('input')
        for (var i = 0; i < input.length; i++) {
            (function(index){
                input[i].onclick = function () {
                    if (this.checked === true) {
                        proxySynchronousFile(this.id)
                    }
                }
            })(i)
        }


    </script>

</body>

</html>